<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>心情排行</title>
  <meta name="description" content="">
  <style>
    :root {
      --nav-height: 20px;
      --bar-height: {$h}px;
    }
  </style>
  <link rel="stylesheet" href="/static/note_report/css/ranking.css?v=4">
  <script>
      const app_type = `{$app_type}`;
  </script>
  <?php
    function getSignName($sign, $limit=3) {
      $res = '';
      switch($sign) {
        case 1:
          $res = '白羊座';
          break;
        case 2:
          $res = '金牛座';
          break;
        case 3:
          $res = '双子座';
          break;
        case 4:
          $res = '巨蟹座';
          break;
        case 5:
          $res = '狮子座';
          break;
        case 6:
          $res = '处女座';
          break;
        case 7:
          $res = '天秤座';
          break;
        case 8:
          $res = '天蝎座';
          break;
        case 9:
          $res = '射手座';
          break;
        case 10:
          $res = '摩羯座';
          break;
        case 11:
          $res = '水瓶座';
          break;
        case 12:
          $res = '双鱼座';
          break;
        default:
          $res = '-';
          break;
      }
      return mb_substr($res, 0, $limit);
    }
  ?>
</head>
<body>
<div class="container">
  <div class="header">
    <div class="nav">
      <div class="back" onclick="commonJsToNative('local', 'back');"></div>
      <div class="title">心情排行</div>
    </div>
  </div>
  <div class="body">
      <div class="card-box">
        <div class="top-three">
          <div class="list-item">
            <div class="name">当前排名</div>
            <div class="des">{$data.top.rank}</div>
          </div>
          <div class="list-item">
            <div class="name">最开心</div>
            <div class="des">{:getSignName($data.top.happy, 2)}</div>
          </div>
          <div class="list-item">
            <div class="name">最Emo</div>
            <div class="des">{:getSignName($data.top.sad, 2)}</div>
          </div>
        </div>
        <div class="top-des">
          {if $data.top.my_sign}
          今日{:getSignName($data.top.my_sign)}一共有{$data.top.my_sign_count}位小行星记录了心情，在星座排行榜中是第{$data.top.rank}名。
          {else}
          你还没有添加档案，快去添加档案吧！
          {/if}
        </div>
      </div>

    <div class="rank-area">
      <div class="tab-title">
        <div class="title-item cur">
          <div class="name">今日</div>
        </div>
        <div class="title-item">
          <div class="name">近7日</div>
        </div>
        <div class="title-item">
          <div class="name">近30日</div>
        </div>
      </div>
      <div class="tab-content">
        <div class="rank-list cur">
          {if empty($data.rank_list.today)}
          <div class="empty-list">暂无数据</div>
          {/if}
          {foreach $data.rank_list.today as $k1 => $v1}
          <div class="list-item">
            <div class="rank">{$k1+1}</div>
            <div class="sign-img sign-img-{$v1.sign_id}"></div>
            <div class="sign-name">{:getSignName($v1.sign_id)}</div>
            <div class="score">{if $v1.score}心情指数{$v1.score}{else}暂无数据{/if}</div>
          </div>
          {/foreach}
        </div>
        <div class="rank-list">
          {if empty($data.rank_list.week)}
          <div class="empty-list">暂无数据</div>
          {/if}
          {foreach $data.rank_list.week as $k1 => $v1}
          <div class="list-item">
            <div class="rank">{$k1+1}</div>
            <div class="sign-img sign-img-{$v1.sign_id}"></div>
            <div class="sign-name">{:getSignName($v1.sign_id)}</div>
            <div class="score">{if $v1.score}心情指数{$v1.score}{else}暂无数据{/if}</div>
          </div>
          {/foreach}
        </div>
        <div class="rank-list">
          {if empty($data.rank_list.month)}
          <div class="empty-list">暂无数据</div>
          {/if}
          {foreach $data.rank_list.month as $k1 => $v1}
          <div class="list-item">
            <div class="rank">{$k1+1}</div>
            <div class="sign-img sign-img-{$v1.sign_id}"></div>
            <div class="sign-name">{:getSignName($v1.sign_id)}</div>
            <div class="score">{if $v1.score}心情指数{$v1.score}{else}暂无数据{/if}</div>
          </div>
          {/foreach}
        </div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</div>
  <script type="text/javascript" src="/static/jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="/static/note_report/js/ranking.js?v=4"></script>
</body>
</html>
